<template>
  <basic-container class="content">
    <el-tabs value="物业类型视图">
      <el-tab-pane label="物业类型视图" name="物业类型视图">
        <div class="box-fl">
          <div class="box-fl-title">物业类型</div>
          <el-table :show-header="false" ref="singleTable" :data="propertyTypes" highlight-current-row @current-change="propertyTypeChange" style="width: 100%">
            <el-table-column property="label" width="120" />
          </el-table>
        </div>
        <div class="box-fr">
          <div class="header">
            <div class="fl">
              <span style="font-weight: 700; font-size: 16px; color: #666666;">检查项列表</span>
            </div>
          </div>
          <dataList
            :pageInfo="pager"
            placeholder="请输入检查项名称"
            :listData="tableData"
            :selectData="selectDataArr"
            searchName="inspectionName"
            @menu-click="handleMenuClick"
            :menuList="['add', 'delete', { export: '导出' }]"
            :filterList="filterList"
            openSelection
          >
            <el-table :data="tableData" ref="multipleTable" @selection-change="$event => (selectDataArr = $event)" style="width: 100%">
              <el-table-column type="selection" width="55" />
              <el-table-column label="排序" prop="sort" width="80" />
              <el-table-column label="物业类型" prop="projectType" :formatter="propertyTypeFormatter" width="120" />
              <el-table-column label="检查项名称" prop="inspectionName" show-overflow-tooltip width="200" />
              <el-table-column label="备注" prop="remarks" show-overflow-tooltip min-width="200" />
              <el-table-column label="操作" fixed="right" width="80">
                <template slot-scope="scope">
                  <el-link @click="showAddOrEdit('edit', scope.row)" type="primary" :underline="false">编辑</el-link>
                </template>
              </el-table-column>
            </el-table>
          </dataList>
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-dialog custom-class="small-padding-dialog" :title="title" :visible.sync="dialogVisible" width="67%" @close="form = {}" :close-on-click-modal="false" class="basic-from">
      <el-divider></el-divider>
      <el-form :model="form" ref="InspectionItemsRuleForm" :rules="rules" class="form-wrap" style="padding-top:0px;" label-position="top">
        <el-form-item label="排序" :label-width="formLabelWidth" prop="sort">
          <el-input v-halfCharCode v-model="form.sort" :min="1" :max="999" style="width:100%;" placeholder="请选择排序值" />
        </el-form-item>
        <el-form-item label="物业类型" :label-width="formLabelWidth" prop="projectType">
          <el-select clearable v-model="form.projectType" placeholder="-=请选择=- ">
            <el-option v-for="item in propertyTypes" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="检查项名称" :label-width="formLabelWidth" prop="inspectionName">
          <el-input v-halfCharCode v-model.trim="form.inspectionName" autocomplete="off" maxlength="80" :readonly="title === '查看检查项目信息'" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="说明" :label-width="formLabelWidth" class="full">
          <el-input v-halfCharCode v-model="form.remarks" autocomplete="off" maxlength="200" :readonly="title === '查看检查项目信息'" placeholder="请输入" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="preservation('InspectionItemsRuleForm')">保存</el-button>
      </div>
    </el-dialog>
  </basic-container>
</template>
<script src="./index.js"></script>

<style lang="scss" scoped>
.content {
  margin-bottom: 15px;
  overflow: hidden;
  .box-fl {
    border: 1px solid #eaeaea;
    float: left;
    width: 15%;

    .box-fl-title {
      height: 49.8px;
      /* line-height: 49.8px; */
      padding: 14px 21px;
      /* text-align: center; */
      font-weight: 700;
      font-size: 16px;
      color: rgb(102, 102, 102);
      border-bottom: 1px solid #eaeaea;
    }

    /deep/ .el-table tr {
      padding: 14px 21px;
      height: 50px;
      border-bottom: 1px solid #eaeaea;
    }

    /deep/ .el-table tr :hover {
      background-color: #d6f5ff;
      color: #1563d1;
    }

    /deep/ .el-table__body tr.current-row > td {
      background-color: #d6f5ff;
      color: #1563d1;
    }
  }

  .box-fr {
    border: 1px solid #eaeaea;
    padding: 14px;
    float: right;
    width: 83%;
  }
}

.header {
  overflow: hidden;
  padding: 15px;
  width: 100%;
  border-bottom: 1px solid rgb(222, 226, 230);

  .fl {
    float: left;
    width: 300px;
  }

  .fr {
    float: right;
  }
}

/deep/ .el-tabs__item.is-active {
  color: black;
}
</style>
